<template>
	<view>
		<!-- style="padding-bottom: 90rpx;" -->
		<view>
			<view class="plr12 ptb12 bgWhite">
				<view class="bde bgE radius8 ptb12 plr12 align-center">
					<image class="radius50" :src="userInfo.avatar" style="width: 80rpx;height: 80rpx;"
						mode="aspectFill"></image>
					<view class="ml10">
						<image v-if="userInfo.grade>0" :src="`/static/images/icon/`+(userInfo.grade || 0)+`g.png`"
							mode="widthFix" style="width: 110rpx;"></image>
						<view class="gray9 fs12">
							{{$t('examine').本月自购销售额}}：{{ Number(moonData.self_f_valued) }}
						</view>
					</view>
				</view>
			</view>
			<!-- 标题 -->
			<view class="flex-col" style="height: calc(100vh - 188rpx);">
				<view>
					<view class="bgWhite w100 justify-between plr12 align-center pb15">
						<view class="align-center">
							<text class="ft14 gray3">{{$t('examine').预估月段位等级}}：</text>
							<view v-if="gradeinfo">
								<text v-if="gradeinfo.grade==1" class="ft20  gray3">{{$t('examine').青铜}}</text>
								<text v-else-if="gradeinfo.grade==2" class="ft20  gray3">{{$t('examine').白银}}</text>
								<text v-else-if="gradeinfo.grade==3" class="ft20  gray3">{{$t('examine').黄金}}</text>
								<text v-else-if="gradeinfo.grade==4" class="ft20  gray3">{{$t('examine').钻石}}</text>
								<text v-else-if="gradeinfo.grade==5" class="ft20  gray3">{{$t('examine').星耀}}</text>
								<text v-else-if="gradeinfo.grade==6" class="ft20  gray3">{{$t('examine').至尊}}</text>
								<text v-else-if="gradeinfo.grade==7" class="ft20  gray3">{{$t('examine').王者}}</text>
							</view>
							<text v-else class="ft20  gray3">--</text>
						</view>
						<!-- 				<view v-else-if="gradeinfo.grade==2"><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">{{$t('examine').白银}}</text></view>
								<view v-else-if="gradeinfo.grade==3"><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">{{$t('examine').黄金}}</text></view>
								<view v-else-if="gradeinfo.grade==4"><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">{{$t('examine').钻石}}</text></view>
								<view v-else-if="gradeinfo.grade==5"><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">{{$t('examine').星耀}}</text></view>
								<view v-else-if="gradeinfo.grade==6"><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">{{$t('examine').至尊}}</text></view>
								<view v-else-if="gradeinfo.grade==7"><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">{{$t('examine').王者}}</text></view>
								<view v-else><text class="ft14 gray3">{{$t('examine').预估本月段位等级}}：</text><text
										class="ft20 bold gray3">--</text></view> -->
						<view>
							<text class="ft14 gray3">{{$t('examine').封顶值}}：</text>
							<text v-if="gradeinfo"
								class="ft20  gray3 ">{{gradeinfo.fenhong_top|changeTH2(10000)}}</text>
							<text v-else class="ft20  gray3 ">--</text>
						</view>
					</view>
					<view class="plr12 ptb12">
						<view class="bglineryellow radius8 ptb10 plr12 align-center justify-between">
							<view>
								<view class="deepgold">
									{{moonData.inFiveDay==1?$t('examine').上月有效销售额:$t('examine').预估本月有效销售额}}：{{moonData.pre_value|changeTH2(10000,lang)}}
								</view>
							</view>
							<u-icon name="question-circle" color="#b8741a" size="16" @click="showd=true"></u-icon>
						</view>
					</view>
					<!-- <view class="ft14 gray3 ptb15 plr12"><text>{{$t('examine').以下展示本月月度考核销售额大于3000的粉丝}}</text></view> -->
					<view v-if="fansLists.length>0" class="justify-between align-center plr20">
						<view style="margin-left: 60rpx;">
							{{$t('examine').粉丝}}
						</view>
						<view class="align-center plr20">
							{{gradeinfo?$t('examine').有效销售额:$t('examine').结算销售额}}
							<u-icon name="question-circle" size="16" class="ml5"
								@click="showEffective=true"></u-icon>
						</view>
					</view>
				</view>
				<view class=" flex1 overhide flex-col" style="min-height: 0rpx;">
					<mescroll-uni top='0' :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback"
						:up="upOption" :down="downOption" bottom="0" :bottombar="false">
						<view class="plr12 pt13" v-for="(item,index) in fansLists" :key="index"
							@click="navTo(`/pages/index/examine/settlement?uid=${item.user_id}`)">
							<view class="bgWhite align-center plr15   radius8 justify-between" style="padding-top: 18rpx;padding-bottom: 18rpx;">
								<view class="gray3 ft15 bold"><text>{{index+1}}</text></view>
								<view class="">
									<image class="radius50 block" :src="item.user.avatar" style="width: 80rpx;height: 80rpx;"
										mode="aspectFill"></image>
								</view>
								<view class="posRelative ">
									<view class="align-center  justify-between" style="width: 471rpx;">
										<view class="ft12 bold gray3 clamp" style="width: 240rpx;">
											<text>{{item.user.nickname}}</text>
										</view>
										<view class="ft16 bold gray3">
											<text>{{parseFloat(item.f_value).toLocaleString() || 0}}</text>
										</view>
									</view>
									<!-- <view @click.stop="isShowData(index)">
										大于2w
										<view class="" v-if="item.f_value>=20000">
											<view class="posRelative ">
												<view class="posAbsort" style="left: 0;">
													<view class="bgGray" style="width: 471rpx;"></view>
												</view>
												<view class="posAbsort zIndex999" style="left: 0;">
													<view class="bgRed "
														:style="{width:(item.new_f_valued)/item.f_value*471+'rpx'}">
													</view>
												</view>
												<view class="posAbsort " style="left: 0;">
													<view class="bgBlue"
														:style="{width:item.new_f_valued/item.new_f_valued*471+'rpx'}">
													</view>

												</view>
											</view>
										</view>
										小于2w
										<view class="" v-else>
											<view class="posRelative">
												<view class="posAbsort" style="left: 0;">
													<view class="bgGray" style="width: 471rpx;"></view>
												</view>
												<view class="posAbsort zIndex999 " style="left: 0;">
													<view class="bgRed"
														:style="{width:(item.f_value-item.add_f_value)/20000*471+'rpx'}">
													</view>
												</view>
												<view class="posAbsort " style="left: 0;">
													<view class="bgBlue" :style="{width:item.f_value/20000*471+'rpx'}">
													</view>
												</view>
											</view>
										</view>
									</view> -->
									<view v-if="isShow==index"
										style="width: 300rpx;top: -54rpx;left: 50%;transform: translate(-50%);"
										class="posAbsort zIndex999">
										<view class="ptb2 "
											style="width: 300rpx;height: 80rpx;background-color: #333333;opacity: 0.8;border-radius: 8rpx;">
											<view class="white ft12 align-center">
												<view class="radius50 ml5 "
													style="width: 16rpx;height: 16rpx;background: #F44A42;">
												</view>
												<view class="ml5">
													<text>{{$t('index').月结算}}：{{parseFloat(item.f_value-item.add_f_value || 0).toLocaleString()}}</text>
												</view>
											</view>
											<view class="white ft12 align-center">
												<view class="radius50 ml5"
													style="width: 16rpx;height: 16rpx;background: #178FFF;">
												</view>
												<view class="ml5">
													<text>{{$t('index').补充}}：{{parseFloat(item.add_f_value || 0).toLocaleString()}}</text>
												</view>
											</view>
										</view>
										<view class="san" style="width: 20rpx;margin: 0 auto;"></view>
									</view>
								</view>
								<view>
									<image src="../../../static/images/fans/right.png"
										style="width: 10rpx;height: 18rpx;">
									</image>
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
				<!-- 			<view v-else>
				<view class="tc" style="padding: 150rpx 0;">
					<image src="../../../static/images/index/wushuju.png" mode="aspectFill"
						style="width: 520rpx;height: 380rpx;"></image>
					<view class="tc  ft15 bold">{{$t('common').暂无数据}}</view>
				</view>
			</view> -->
			</view>
		</view>
		<!-- 加油站 -->
		<view class="bgWhite plr15 ptb5 posFixed zIndex999" style="bottom: 0;" @click="navTo('/pages/mine/goodList')">
			<view class="jBtn align-center justify-center">
				<image src="../../../static/images/index/shandian.png" style="width: 30rpx;height: 32rpx;"
					mode="aspectFill"></image>
				<view class="light ft16 ml2"><text>{{$t('mine').加油站}}</text></view>
			</view>
		</view>
		<u-popup :show="showd" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe justify-center align-center" style="max-width: 600rpx;">
				<view class="ft15 ptb20 " style="max-width: 600rpx;">
					<view class="plr20 tc">
						{{$t('examine').每月15根据月度段位等级和封顶值计算有效销售额}}
					</view>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showd = false">
				<view class="ft15 light"><text>{{$t('fan').我知道了}}</text></view>
			</view>
		</u-popup>
		<u-popup :show="showEffective" @close="close" mode="center" round="8px" :safeAreaInsetBottom="false">
			<view class="bdbe justify-center align-center" style="max-width: 600rpx;">
				<view class="ft15 ptb20 " style="max-width: 600rpx;" >
					<view class="plr20 tc">
						{{$t('examine').根据月度段位等级和封顶值计算有效销售额}}
					</view>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showEffective = false">
				<view class="ft15 light"><text>{{$t('fan').我知道了}}</text></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				showd: false,
				showEffective: false,
				lang:uni.getStorageInfoSync('lang')?uni.getStorageSync('lang').lang:'zh',
				moonData: {},
				downOption: {
					auto: true
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: '已经到底了'
				},
				isShow: -1,
				showData: '',
				fansLists: [],
				gradeinfo: {}, //本月考核信息
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('examine').本月考核
			})
		},
		methods: {
			close() {
				this.showd = false
				this.showEffective = false
			},
			isShowData(index) {
				if (index == this.isShow) {
					this.isShow = -1
				} else {
					this.isShow = index
				}
			},
			// 本月考核
			// async moonexamineAPI() {
			// 	const res = await this.$api.moonexamine({
			// 		uid: uni.getStorageSync('userInfo').id, // 327719 
			// 	})
			// 	if (res && res.code == 1) {
			// 		this.gradeinfo = res.data.gradeinfo
			// 		this.fansLists = res.data.list
			// 	}
			// },
			upCallback(page) {
				if (page.num == 1) this.fansLists = []; //如果是第一页需手动制空列表
				this.$api.moonexamine({
					uid: uni.getStorageSync('userInfo').id,
					page: page.num,
					limit: page.size
				}).then(res => {
					if (res.data.list == null || ((res.data.list?.length < 0) && res.data.homne < 0)) {
						uni.reLaunch({
							url: '/pages/login/Nopermission'
						})
					} else {
						let curPageData = res.data.list; //当前页的数据列表
						let curPageLen = curPageData?.length; //当前页的数据长度
						let totalPage = parseInt(res.data.count / 20) + 1; //总页数
						console.log(totalPage)
						let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
						this.fansLists = this.fansLists.concat(curPageData); //追加新数据
						this.mescroll.endSuccess(curPageLen, hasNext);
						this.gradeinfo = res.data.gradeinfo
						this.moonData = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-percentage-slot {
		padding: 0 5px;
		background-color: #178FFF;
		color: #fff;
		border-radius: 100px;
		font-size: 10px;
		margin-right: -5px;
		height: 10rpx;
	}

	.jBtn {
		width: 686rpx;
		height: 70rpx;
		border-radius: 35rpx;
		border: 2rpx solid #F44A42;
	}

	.san {

		border-top: 20rpx solid #333333;
		border-bottom: 0rpx solid transparent;
		border-left: 20rpx solid transparent;
		border-right: 20rpx solid transparent;
		opacity: 0.8;
	}

	.bgGray {
		height: 10rpx;
		background: #FEF6F5;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.bgBlue {
		height: 10rpx;
		background: #178FFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.bgRed {
		height: 10rpx;
		background: #F44A42;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}
</style>